<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>55社区</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="/theme/default/images/favicon.png">
    <link href="${ctx}/static/phone/css/amazeui.min.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/phone/css/style.css" rel="stylesheet" type="text/css" />
    <script src="${ctx}/static/phone/js/jquery-1.10.2.min.js"></script>
    <script src="${ctx}/static/phone/js/time.js"></script>
</head>
<body>
<header data-am-widget="header" class="am-header am-header-default sq-head ">
    <div class="am-header-left am-header-nav">
        <a href="javascript:history.back()" class="">
            <i class="am-icon-chevron-left"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="" id="categoryId" name="category" class="">商品分类</a>
    </h1>
</header>
<div style="height: 49px;"></div>
<div class="cate-search">
    <input type="text" class="cate-input" placeholder="请输入您要的搜索的产品关键词" />
    <input type="button" class="cate-btn" />
</div>
<div class="content-list">
    <div class="list-left">
        <c:forEach var="category" items="${categorylist}" varStatus="ss">
            <li class="${ss.first?'current':''}"><a id="category" onclick=obtain(this.innerText) href="javascript:void(0);">${category.category_name}</a></li>
        </c:forEach>
    </div>
    <div class="list-right">
        <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-avg-md-2 am-avg-lg-4 am-gallery-default am-no-layout">
            <%--<li><div class="am-gallery-item"><a href="#" class=""><img src="{{img}}"><h3 class="am-gallery-title">{{name}}</h3></a></div></li>--%>
        </ul>
    </div>
</div>

<!--底部-->
<jsp:include page="commonBottom.jsp"></jsp:include>


<script src="${ctx}/static/phone/js/jquery.min.js"></script>
<script src="${ctx}/static/phone/js/amazeui.min.js"></script>


<script>
    // obtain-获取
    function obtain(val) {
        var myData = {"category":val}
        $.post( "${ctx}/category/goods_list.do",myData,function (result) {
            var a = '<li><div class="am-gallery-item"><a href="{{url}}" class=""><img src="{{img}}"><h3 class="am-gallery-title">{{name}}</h3></a></div></li>'
            $(".am-gallery").html("");
            var data=result.goodsList;
            for (var i = 0; i < data.length ;i++) {
                var g = data[i];//取出当前店
                var con = a.replace("{{url}}","goods_detail.do?id="+g.goods_id);
                con = con.replace("{{img}}","${ctx}/static/phone/"+g.goods_img);
                con = con.replace("{{name}}",g.goods_name);
                $('.am-gallery').append(con);
            }
        },'json');
    }

    //为一级分类添加点击事件 并且切换样式
    $(".list-left li").click(function () {
        //点击对象的父级（li）的兄弟级（li）的子集（a）移除类
        $(this).siblings().removeClass("current");
        //点击对象的父级（li）的兄弟级（li）移除类
        $(this).addClass("current");
        // loadcategory($(this));
    });

    $(function () {
        $('#category').eq(0).click()
    })

</script>
</body>
</html>
